<template>
  <el-card class="mb-6 audit-action-card">
    <template #header>
      <span class="font-bold">审核操作</span>
    </template>

    <el-form :model="auditForm" ref="auditFormRef" label-width="100px">
      <el-form-item label="审核意见" prop="idea">
        <el-input v-model="auditForm.idea" type="textarea" :rows="6" placeholder="请输入审核意见" />
      </el-form-item>

      <el-form-item>
        <el-space :size="20">
          <el-button type="success" plain @click="handleAudit('1')" :loading="loading">
            <el-icon>
              <Check />
            </el-icon>
            审核通过
          </el-button>
          <el-button type="danger" plain @click="handleAudit('2')" :loading="loading">
            <el-icon>
              <Close />
            </el-icon>
            审核退回
          </el-button>
        </el-space>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Check, Close } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

interface Props {
  loading?: boolean;
}

interface Emits {
  (e: 'audit', data: { status: string; idea: string }): void;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
});

const emit = defineEmits<Emits>();

// 审核表单
const auditFormRef = ref();
const auditForm = ref({
  idea: ''
});

// 审核操作
const handleAudit = (status: string) => {
  auditFormRef.value?.validate((valid) => {
    if (valid) {
      const actionText = status === '1' ? '审核通过' : '审核退回';
      ElMessageBox.confirm(`确认要${actionText}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          emit('audit', {
            status: status,
            idea: auditForm.value.idea || ''
          });
        })
        .catch(() => {});
    }
  });
};

// 重置表单
const resetForm = () => {
  auditForm.value.idea = '';
  auditFormRef.value?.resetFields();
};

// 暴露方法给父组件
defineExpose({
  resetForm
});
</script>

<style scoped>
.audit-action-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.font-bold {
  font-weight: bold;
}
</style>
